<template>
  <div>
    <Header :title="'返回'" :subTitle="'会员列表'" :hasBackPath="true" @headerBack="headerBack" v-if="blank != 'blank'"></Header>
    <a-card :bordered="false" class="cus-container">
      <a-button type="primary" v-has="'customerList:add'" @click="handleStyle" class="create-btn" v-if="subStatus == 1 && remainNum > 0 && !isBlack">下盒</a-button>
      <a-button type="primary" v-has="'customerList:add'" disabled class="create-btn" v-else>下盒</a-button>
      <a-menu :selectedKeys="blank == 'blank' ? [$route.path + '?blank=blank'] : [$route.path]" mode="horizontal">
        <a-menu-item v-for="routeItem in routeList" :key="routeItem.path">
          <router-link :to="routeItem.path">{{ routeItem.meta.title }}</router-link>
        </a-menu-item>
      </a-menu>
      <div class="list-content">
        <route-view></route-view>
      </div>
    </a-card>
  </div>
</template>
<script>
import Header from '@/views/box/components/layouts/Header'
import RouteView from '@/components/layouts/RouteView'
import { mapState } from 'vuex'
import { getQueryString } from '@/assets/js/common'
import { selectById } from '@/api/box/api'
import { getCustomerAskBoxInfo } from '@/api/box/workbench'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { fetchUserIsBlack } from '@/views/box/util/global'

export default {
  components: {
    RouteView,
    Header
  },
  data() {
    return {
      id: '',
      routeList: [],
      blank: '',
      unionId: '',
      subStatus: '',
      remainNum: '',
      isBlack: null,
      userInfo: Vue.ls.get(USER_INFO)
    }
  },
  computed: {
    ...mapState({
      // 后台菜单
      permissionMenuList: state => state.user.authPermissionList
    })
  },
  created() {
    this.blank = getQueryString('blank')
    this.getPage()
    this.unionId = this.$route.params.id
    this.fetchUserInfo()
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    headerBack() {
      this.$router.push('/box/customer/customerList/index')
    },
    // 获取当前权限模块
    getPage() {
      this.id = this.$route.params.id
      let currentPath = this.$route.path
      let str = new RegExp(this.id, 'g')
      currentPath = currentPath.replace(str, ':id')
      this.findCurrentRouteArr(this.permissionMenuList, currentPath)
    },
    // 查找当前路由所在的路由列表
    findCurrentRouteArr(menus, key) {
      for (let i of menus) {
        if (i.children && i.children.length > 0) {
          if (i.children.map(e => e.path).includes(key)) {
            this.routeList = i.children.map(e => {
              return {
                ...e,
                path: e.path.replace(':id', this.id + '')
              }
            })
            if (this.blank == 'blank') {
              for (let item of this.routeList) {
                item.path = item.path + '?blank=blank'
              }
            }
            console.log(this.routeList)
            break
          } else {
            this.findCurrentRouteArr(i.children, key)
          }
        }
      }
    },
    fetchUserInfo() {
      selectById(this.unionId, '').then(res => {
        if (res.code == 0) {
          this.subStatus = res.data.subStatus
          this.remainNum = res.data.rightsNum
          this.isBlack = res.data.isBlack
        }
      })
    },
    async handleStyle() {
      let result = await fetchUserIsBlack(this.unionId)
      if (result) {
        this.$message.warning('黑名单用户，无法下盒!')
        return
      }
      let res = await this.checkHasWantBox()
      if (res.code == 0) {
        if (this.userInfo.roleCode.indexOf('fashioner') !== -1 || this.userInfo.roleCode.indexOf('10003') !== -1) {
          gio('track', 'event_build_box', { cur_fashioner_id: this.userInfo.phone, cur_unionid: this.unionId })
        }

        if (res.data != null) {
          this.$router.push(`/box/workbench/fashioner/selection/${this.unionId}/${res.data.customerAskBoxId}`)
        } else {
          this.$router.push(`/box/workbench/fashioner/selection/${this.unionId}/getstyle`)
        }
      }
    },
    checkHasWantBox() {
      let params = {
        unionid: this.unionId
      }
      return getCustomerAskBoxInfo(params).then(res => {
        return res
      })
    }
  }
}
</script>
<style lang="less" scoped>
.list-content {
  padding-top: 16px;
}
.cus-container {
  position: relative;
  .create-btn {
    position: absolute;
    right: 24px;
  }
}
</style>

